<template>
	<view class="clearfix">
		<uni-top2 fixed="true" statusBar="true" class="top" leftIcon="back" border="" 
			background-color="#585cf7" right-text="搜索" color="#fff" @clickRight="search" @clickLeft="back">
			<view class="input-view">
				<uni-icons class="input-uni-icon" type="search" size="22" color="#666666" />
				<input confirm-type="search" class="nav-bar-input" type="text" placeholder="姓名,订单号" @confirm="confirm" v-model="searchText">
			</view>
		</uni-top2>
		
		<!--暂无数据-->
		<view class="nocontent" v-if="orderList.length == 0">
			<image src="/static/image/public/WSJ.png" class="wsjImg"></image>
			<view>暂无数据</view>
		</view>
		
		<view class="page_list" v-else>
			<view class="list_item" v-for="item in orderList" :key="item.id" @click="goToReview(item.orderNumber)">
				<view class="top">
					<view class="left">
						<text class="orderNum">{{item.orderNumber}}</text>
						<text class="productName">{{item.productName}}</text>
					</view>
					<view class="right">
						<text class="time">{{item.day}}天前</text>
					</view>	
				</view>
				<view class="center">
					<view class="left">
						<text class="name">{{item.borrowerName}}</text>
						<text class="status" :class="`status${item.state}`">{{item.statusName}}</text>
					</view>
					<view class="right">
						<block v-if="item.money">
							￥<text class="money">{{item.money}}</text> 万
						</block>
					</view>
				</view>
				<view class="address">
					{{item.address}}
				</view>
				<view class="bottom">
					<image class="img" src="../../static/image/page/time.png" mode="aspectFit"></image>
					<text class="text">本订单正在由徐竹进行下户调查</text>
				</view>
			</view>
		</view>
		<!--end  pageList-->
		 <uni-load-more :status="status" v-if="pageSize > 1"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText:"",
				orderList: [],
				pageNo: 0,
				pageSize: 0,
				status: 'more',
			};
		},
		onLoad(option) {
			this.searchText = option.text;
			let obj = {
				keyWord: option.text,
			}
			this.search(obj);
		},
		onReachBottom: function() {
			if(!this.hasLogin) return;
			let that = this;
			let pageNo = this.pageNo +1;
			if(pageNo <= this.pageSize){
				let obj = {
					pageNo : pageNo,
					keyWord :that.searchText
				}
				that.getMoreData(obj)
			}else{
				that.status = "noMore"
			}
		},
		methods:{
			//返回
			back(){
				uni.navigateBack({})
			},
			//搜索
			confirm(val){
				let text = val.detail.value;
				let obj = {
					keyWord:text
				} 
				this.search(obj);
			},
			search() {
				let obj = {
					keyWord: this.searchText
				}
				this.$api.dtgSearch(obj).then(res=> {
					let resD = res.data.data; 
					this.orderList = resD.records;
					this.pageNo = resD.current;
					this.pageSize = resD.pages
				})
			},
			getMoreData(obj) {
				this.$api.dtgSearch(obj).then(res=> {
					let data = res.data.data.records;
					if(data){
						this.orderList = this.orderList.concat(data);
						this.pageSize = res.data.data.pages;
						this.pageNum = res.data.data.current;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.top{
	.input-view {
		display: flex;
		flex-direction: row;flex: 1;background-color: #FFFFFF;height: 30px;border-radius: 15px;padding: 0 15px;flex-wrap: nowrap;
		margin: 7px 0;line-height: 30px;
	}
	.input-uni-icon {line-height: 30px;}
	.nav-bar-input {height: 30px;line-height: 30px;padding: 0 5px;font-size: 14px;background-color: #FFFFFF;color: #333;}
}
.page_list{padding:  0 30rpx;margin-top: 20rpx;}
.list_item{padding: 20rpx; background: #FFFFFF;box-shadow: 0px 0px 38rpx 2rpx rgba(0, 0, 0, 0.04);border-radius: 20rpx;margin-bottom: 20rpx;
	.top {height: 58rpx; display: flex;justify-content: space-between;align-items: center; padding-bottom: 16rpx;border-bottom: 2rpx solid #EEEEEE;
			.orderNum{font-size: 26rpx;font-weight: 500;color: #333333;}
			.productName{border: 1px solid $dtg-color-primary; border-radius: 4rpx;font-size: 22rpx;font-weight: 500;color: $dtg-color-primary; margin-left: 20rpx; padding: 0 8rpx;}
			.time{font-size: 22rpx; color:#999999}
		}
	.center{
		height: 80rpx;display: flex;justify-content: space-between;align-items: center; 
		.name{font-size: 32rpx;font-weight: bold;color: #333333;}
		.status{background: $dtg-color-primary;border-radius: 4rpx;font-size: 22rpx; color:#FFFFFF;padding: 0 10rpx;margin-left: 20rpx;line-height: 32rpx;}
		.status1{background: #FF9500}
		.status2{background:#FF9500}
		.status3{background:#28B779}
		.status4{background:#F96363}
		.status5{background:#28B779}
		.status6{background:#F96363}
		.money{font-weight: bolder;font-size: 42rpx;}
	}
	.address{font-size: 26rpx;font-weight: 500;color: #333333;line-height: 40rpx;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;}
	.bottom{height: 60rpx;background: #F8F8F8;margin-top: 12rpx;display: flex;justify-content: flex-start;align-items: center;padding: 0 20rpx;
		.img{width: 26rpx;height: 26rpx;margin-right: 20rpx;}
		.text{font-size: 22rpx;font-weight: 500;color: #999999;}
	}
}
.nocontent {width: 100%;font-size: 15px;text-align: center; padding-top: 160rpx;color: #999999;line-height: 50px;
	.wsjImg {width: 180px;height: 125px;margin: 0 auto;}
}	
</style>
